<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/public.css"/>
        <script src="__PUBLIC__/midi/js/jquery-2.2.3 (1).js" type="text/javascript"></script>
        <script src="__PUBLIC__/midi/js/public.js" type="text/javascript"></script>
        <script src="__PUBLIC__/midi/js/swiper-3.4.2.jquery.min.js"></script>
         <script src="__PUBLIC__/midi/js/check-forget.js"></script>
	    <style>
	    	.migister-box{
	    		width: 390px;
	    		margin: 0 auto;
	    		margin-top: 64px;
	    		margin-bottom: 224px;
	    	}
	    	.migister-box .form-text{
	    		text-align: right;
	    		margin-bottom: 64px;
	    	}
	    	.migister-box .form-text i{
	    		cursor: pointer;
	    		color: #29D0C9;
	    	}
	    	form input,button{
	    		border: 0;
	    		outline: none;
	    	}
	    	form .formi{
	    		padding-bottom: 17px;
	    		border-bottom: 1px solid #d1d1d1;
	    	}
	    	form .formi-last{
	    		margin-bottom: 24px;
	    	}
            .formi-phone{
            	height: 24px;
            	position: relative;
            	margin-bottom: 21px;
            }
	    	.formi-phone i{
	    		width: 19px;
	    		height: 25px;
	    		display: inline-block;
	    		background-image: url(__PUBLIC__/midi/img/shoujihao.png);
	    		position: absolute;
	    		left: 5px;
	    		bottom: 17px;
	    	}
	    	.formi-phone input{
	    		position: absolute;
	    		left: 54px;
	    		bottom: 22px;
	    	}
	    	.formi-email{
	    		position: relative;
	    		height:40px;
	    		margin-bottom: 26px;
	    	}
	    	.formi-email i{
	    		width: 19px;
	    		height: 25px;
	    		display: inline-block;
	    		background-image: url(__PUBLIC__/midi/img/iconfont-youxiang.png);
	    		position: absolute;
	    		left: 3px;
	    		bottom: 23px;
	    	}
	    	.formi-email input{
	    		position: absolute;
	    		left: 54px;
	    		bottom: 21px;
	    	}
	    	.formi-email a{
	    		position: absolute;
	    		right: 1px;
	    		bottom: 11px;
	    	}
	    	.formi-mima{
	    		height: 25px;
	    		position: relative;
	    		margin-bottom: 26px;
	    	}
	    	.formi-mima i{
	    		width: 19px;
	    		height: 25px;
	    		display: inline-block;
	    		background-image: url(__PUBLIC__/midi/img/mima-.png);
	    		position: absolute;
	    		left: 4px;
	    		bottom: 21px;
	    	}
	    	.formi-mima input{
	    		position: absolute;
	    		left: 53px;
	    		bottom: 22px;
	    	}
	    	.formi-last i{
	    		background-image: url(__PUBLIC__/midi/img/tupianyanzhengma.png);
	    	}
	    	form .forma a{
	    		display: inline-block;
                width: 100px;
                height: 40px;
                line-height: 40px;
                border-radius: 10px;
                text-align: center;
                cursor: pointer;
	    	}
	    	form .formr input{
	    		margin-right: 10px;
	    	}
	    	form .formr span a{
	    		color: #29D0C9;
	    	}
	    	form .formb button{
	    		width: 390px;
	    		height: 50px;
	    		background-color: #29D0C9;
	    		color: #fff;
	    		font-size: 1.8rem;
	    		font-weight: bold;
	    		border-radius: 10px;
	    	}
	    	.formi .img-box{
	    		position: absolute;
	    		right: 0px;
	    		height: 100%;
	    		top: -11px;
	    	}
          .alert_box{
	    		height:17px;
	    		padding-bottom: 17px;
	    		text-align: center;
	    		color: red;
	    	}
         .mask {
	           display: none;
	          position: fixed;
	          top: 0;
	          right: 0;
	         bottom: 0;
	         left: 0;
	         -webkit-align-items: center;
	         align-items: center;
	         -webkit-box-align: center;
	         -webkit-box-pack: center;
	         -ms-flex-align: center;
	         -ms-flex-pack: center;
	         -webkit-justify-content: center;
	          justify-content: center;
             }

          .show {
	       display: -webkit-box;
	       display: -webkit-flex;
	       display: -ms-flexbox;
	       display: flex;
          }

         .code-alert {
	         width: 8rem;
	         text-align: center;
	         color: #fff;
	         border-radius: 3px;
	         background: rgba(0, 0, 0, 0.5);
         }
         .code-right{
         	background-color: #777;
         	color: #fff;
         }
         .active{
                background-color: #29d0c9;
                color: #fff;
         }
         input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;}

	    	@media only screen and (min-width:1201px ) {
	    		.migister-mb{
	    			display: none;
	    		}
	    	}
	    	@media only screen and (max-width:1200px ) {
	    		.main{
	    			display: block;
	    		}
	    		.banquan{
	    			display: none;
	    		}
	    		.bu-login{
	    			padding-top: 3vh;
	    		}
	    		.img-box img{
	    			width: 21.111111vw !important;
	    			padding-right: 0 !important;
	    		}
	    		form .formi{
	    			margin: 0 6.133333vw;
                    border: 1px solid #D1D1D1;
                    border-radius: 4px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    align-items: center;
                    -webkit-align-items: center;
                     padding: 2vh 0;
                     margin-bottom: 2vh;
	    		}
	    		form .formi .code-right{
	    			width: 21.1vw !important;
	    			height: 5vh !important;
	    			line-height: 5vh !important;
	    			bottom: 3.7vh !important;
	    			border-radius: 6px !important;
	    			font-size: 3vw;
	    		}
	    		.migister-box{
	    			width: auto;
	    			margin: 0;
	    		}
	    		.migister-box .form-text{
	    			margin-bottom: 2vh;
	    			margin-top: 2vh;
	    			padding-right: 7vw;
	    		}
	    		.migister-box .form-text a{
	    			font-size: 4.1666667vw;
	    		}
	    		.formi i{
	    			margin-left: 4vw;
	    			margin-right: 4vw;
	    			position: initial;
	    		}
	    		.formi input{
	    			font-size: 4.166667vw;
	    			bottom: auto;
	    			position: initial;
	    		}
	    		.formi a{
	    			font-size: 4.166667vw;
	    		}
	    		.formi .img-box{
	    			top: 2.8vh !important;
	    		}
	    		.alert_box{
	    			font-size: 4.166667vw;
	    		}
	    		.formi-last{
	    			margin: 2vh 6.133333vw;
	    		}
	    		.formi-last span{
	    			font-size: 4vw;
	    		}
	    		form .formb button{
	    			margin: 0 6vw;
	    			width: calc(100% - 12vw);
	    			font-size: 4.166667vw;
	    			padding: 2vh 0;
	    			margin-bottom: 3vh;
	    		}
	    	}
	    </style>
	</head>
	<body>
		<!--头部导航栏开始-->
		<include file="Public/header" />
		<!--头部导航栏结束-->
		<div class="migister-mb">
			<div class="wiezhi">
			   <div class="con">
				  <span>当前位置：注册</span>
			   </div>
		    </div>
		  <!--   <div class="login">
			   <div class="con">
				  <p>账号密码注册</p>
			   </div>
		    </div> -->

		</div>
		<div class="main">
			<div class="migister-box">
				<div class="inner">
					<form action="__CONTROLLER__/register_action" method="POST" autocomplete="off">
						<div class="form-text">
							<a href="__CONTROLLER__/login">已有账号？<i>马上登录</i></a>
						</div>
						<div class="formi formi-phone">
							<i></i>
							<input type="text" name="user_phone" placeholder="请输入手机号" class="tel-box"/>
						</div>
                        <div class=" formi formi-last formi-mima">
							<i></i>
							<input type="text" minlength="4" maxlength="4" class="c" placeholder="图片验证码" name="verify" id="verify"/>
					        <span class="img-box">
						        <img src="__CONTROLLER__/showVerify" onclick="this.src+='/'+Math.random();" title="点击变换" id="vimg">
					        </span>
						</div>
						<div class="formi formi-mima">
							<i></i>
							<input type="password" name="user_password" placeholder="设置密码" class="pwd-f" />
						</div>
						<div class=" formi  formi-mima">
							<i></i>
							<input type="password" placeholder="确认密码" class="pwd-s" />
						</div>
						<div class="formi forma formi-email">
							<i></i>
							<input type="text" placeholder="请输入验证码" class="test-code" />
							<a class= "code-right get_code active">获取验证码</a>
						</div>
                        <div class="alert_box"></div>
                        <div class="mask">
                        	<div class="code-alert">
                        		获取验证码成功
                        	</div>
                        </div><!-- 
						<div class="formr formi-last">
							<input type="checkbox" id="check" />
							<span>我已阅读<a>《MIDI服务条款》</a>,点击注册即视为同意条款</span>
						</div> -->
						<div class="formb">
							<button class="btn">注 册</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!--版权-->
		<div class="banquan">
			<p>Copyright &copy; 2016迷笛考级 京ICP备10011451号-6</p>
		</div>
		<!--版权结束-->
		<!--移动端注册页的主要内容-->
		<!--移动端注册页的主要内容结束-->
	</body>
</html>
